<template>
    <div class="wel-box">
        <van-circle v-model:current-rate="currentRate"
            :clockwise="false"
            :size="40"
            @click="clickEvt"
            :stroke-width="60"
            :text="`${Math.ceil(currentRate / 20)}s`"/>
        <div class="brand">
            顽客周边
        </div>
        <div class="title">热门动漫周边精选</div>
        <div class="right">
            顽客科技&copy; 2023  
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onBeforeMount, ref } from "vue";
import { useRouter } from "vue-router";
import { autoLoginApi } from "../../apis/userApis";
import { AUTO_CACHE_KEY } from "../../config/common.cfg";
import { useCommonStore } from "../../store";
import { deCodeApi } from "../../utils";

const router  = useRouter()
const currentRate = ref(100)

/** 倒计时跳转 */
let timer:number = setInterval(function(){
    currentRate.value -= 1;
    // 判断倒计时小于0就清除定时器，并跳转到登录界面
    if (currentRate.value < 0 ){
        clearInterval(timer)
        if (canState.value === 'success') {
            router.push('/home')
        } else {
            router.push('/login')
        }
    }
},50)

/** 用户点击跳转方法 */
function clickEvt(){
    if(canState.value == 'loading') return
    clearInterval(timer)
    if(canState.value == 'success'){
        router.push('/home')
    }else{
        router.push('/login')
    }
    
}

// 是否免登录
const canState= ref('loading')
onBeforeMount(async function() {
    // 获取缓存信息
    let _cache = localStorage.getItem(AUTO_CACHE_KEY)  
    // 判断缓存是否存在
    if(_cache){
        // 解密——cache赋值给token
        useCommonStore().token = deCodeApi(_cache)
        let _res = await autoLoginApi()
        console.log(_res);
        if(_res.code == 200){
            useCommonStore().token = _res.data.token
            useCommonStore().userInfo = _res.data
            canState.value = 'success'
            console.log(3333);
            
        }else{
            canState.value = 'error'
        }
    }
    else{
        canState.value = 'error'
    }
})


</script>

<style lang="less" scoped>
@import "../../style/comon.less";

.wel-box {
    /** 定义一个相对定位方法 */
    .rel();
    padding-top: 30vh;
    .van-circle {
        position: absolute;
        top: 10px;
        right: 10px;
    }
    .brand {
        font-size: 1.2rem;
        text-align: center;
        line-height: 40px;
        color: @g10;
        &::before {
            content: '';
            display: inline-block;
            vertical-align: bottom;
            width: 40px;
            height: 40px;
            background: url(../../../public/img/logo.png) center center / 40px 40px no-repeat;
        }
    }
    .title {
        display: block;
        text-align: center;
        font-size: .7rem;
        color: @g10;
        margin-top: 20px;
    }

    .right{
        width: 70px;
        position: fixed;
        bottom: 10px;
        left: calc(50% - 35px);
        font-size: .6rem;
        text-align: center;
        color: #ccc;
    }
}
</style>